const createOrdinaryCmpt = Vue.component('create-ordinary-cmpt', {
    template: '<div class="unSelected">\n' +
        '    <el-drawer style="text-align: left" :wrapperClosable="false" :close-on-press-escape="false" title="API服务"\n' +
        '               size="50%" :visible.sync="drawer" :with-header="true">\n' +
        '      <div class="body-content">\n' +
        '        <el-card class="box-card">\n' +
        '          <div slot="header" class="clearfix">\n' +
        '            <span><i class="el-icon-warning-outline"/> 基础信息</span>\n' +
        '          </div>\n' +
        '          <div class="create-item">\n' +
        '            <span class="title"><span style="color: red">*</span>API分组：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <el-select v-model="general[0]">\n' +
        '                <el-option\n' +
        '                    v-for="item in group"\n' +
        '                    :key="item.value"\n' +
        '                    :disabled="item.label ===\'短信服务\'"\n' +
        '                    :label="item.label"\n' +
        '                    :value="item.value">\n' +
        '                </el-option>\n' +
        '              </el-select>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item">\n' +
        '            <span class="title"><span style="color: red">*</span>API名称：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <el-input maxlength="15" show-word-limit v-model="general[1]" class="components" placeholder="API Name"/>\n' +
        '              <span class="description">名称最短2个字符最长15个字符</span>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item">\n' +
        '            <span class="title"><span style="color: red">*</span>版本号：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <el-input v-model="general[2]" class="components" placeholder="Version"/>\n' +
        '              <span class="description">起始版本为1.0</span>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item">\n' +
        '            <span class="title" style="line-height: 20px"><span style="color: red">*</span>描述：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <el-input class="components" type="textarea" rows="10" v-model="general[3]" placeholder="Description"/>\n' +
        '              <span class="description">描述API实际作用,此项不能为空</span>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item">\n' +
        '            <span class="title" style="line-height: 17px">缓存：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <el-switch disabled v-model="general[4]"/>\n' +
        '              <span class="description">开启缓存并配置了缓存组件生效</span>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item">\n' +
        '            <span class="title" style="line-height: 17px">对外可见：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <el-switch v-model="general[5]"/>\n' +
        '              <span class="description">开启则其他人可以在列表中看见</span>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '        </el-card>\n' +
        '      </div>\n' +
        '\n' +
        '      <div class="body-content">\n' +
        '        <el-card class="box-card">\n' +
        '          <div slot="header" class="clearfix">\n' +
        '            <span><i class="el-icon-link"/> 接口设计</span>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item">\n' +
        '            <span class="title"><span style="color: red">*</span>接口路径：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <el-input @blur="checkApi(e)" :disabled="data!=null" v-model="interfaces[0]" class="components"\n' +
        '                        placeholder="接口路径"/>\n' +
        '              <span class="description">路径用于请求服务的标识信息</span>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item">\n' +
        '            <span class="title"><span style="color: red">*</span>请求协议：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <el-select v-model="interfaces[1]">\n' +
        '                <el-option value="HTTP" label="HTTP">HTTP</el-option>\n' +
        '                <el-option value="HTTPS" label="HTTPS">HTTPS</el-option>\n' +
        '              </el-select>\n' +
        '              <span class="description">请求协议类型</span>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item">\n' +
        '            <span class="title" style="line-height: 18px"><span style="color: red">*</span>组件：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <div style="display: flex;flex-direction: row">\n' +
        '                <el-checkbox-group v-model="interfaces[2]">\n' +
        '                  <el-checkbox v-for="(item,index) in components" :key="index"\n' +
        '                               :value="item.value"\n' +
        '                               :checked="item.checked"\n' +
        '                               :disabled="item.disabled"\n' +
        '                               :label="item.value">{{ item.label }}\n' +
        '                  </el-checkbox>\n' +
        '                </el-checkbox-group>\n' +
        '              </div>\n' +
        '              <span class="description">一些特定的场景下需要用到组件</span>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item" v-if="hasLimit">\n' +
        '            <span class="title" style="line-height: 40px"><span style="color: red">*</span>限流策略：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <div style="display: flex;flex-direction: row">\n' +
        '                <el-input style="width: 150px" placeholder="10" v-model="interfaces[3]">\n' +
        '                  <template slot="append">次/分</template>\n' +
        '                </el-input>\n' +
        '                <el-input disabled style="width: 150px;margin-left: 10px" placeholder="10" v-model="interfaces[4]">\n' +
        '                  <template slot="append">次/时</template>\n' +
        '                </el-input>\n' +
        '                <el-input disabled style="width: 150px;margin-left: 10px" placeholder="10" v-model="interfaces[5]">\n' +
        '                  <template slot="append">次/天</template>\n' +
        '                </el-input>\n' +
        '              </div>\n' +
        '              <span class="description">限流策略，配置最大请求次数</span>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '          <div class="create-item">\n' +
        '            <span class="title" style="line-height: 18px"><span style="color: red">*</span>多环境：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <div style="display: flex;flex-direction: row">\n' +
        '                <el-checkbox v-for="(item,index) in environ" v-model="interfaces[6]"\n' +
        '                             :disabled="!item.available" :key="index" :label="item.idEnv">{{ item.name }}\n' +
        '                </el-checkbox>\n' +
        '              </div>\n' +
        '              <span class="description">配置服务上线环境, 海外环境可访问Google,Twitter等服务</span>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item">\n' +
        '            <span class="title" style="line-height: 17px">异常熔断：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <el-switch v-model="fuse[3]"/>\n' +
        '              <span class="description">下游服务出现异常时进行请求快速熔断降级</span>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item" v-if="fuse[3]">\n' +
        '            <span class="title" style="line-height: 40px"><span style="color: red">*</span>熔断策略：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <div style="display: flex;flex-direction: row">\n' +
        '                <div style="display: flex;flex-direction: column">\n' +
        '                  <el-input style="width: 150px" placeholder="5000" v-model="fuse[0]">\n' +
        '                    <template slot="append">毫秒</template>\n' +
        '                  </el-input>\n' +
        '                  <span class="description">熔断恢复时间</span>\n' +
        '                </div>\n' +
        '                <div style="display: flex;flex-direction: column">\n' +
        '                  <el-input style="width: 150px;margin-left: 10px" placeholder="50" v-model="fuse[1]">\n' +
        '                    <template slot="append">%</template>\n' +
        '                  </el-input>\n' +
        '                  <span class="description" style="margin-left: 10px">容错率</span>\n' +
        '                </div>\n' +
        '                <div style="display: flex;flex-direction: column">\n' +
        '                  <el-input style="width: 150px;margin-left: 10px" placeholder="5000" v-model="fuse[2]">\n' +
        '                    <template slot="append">毫秒</template>\n' +
        '                  </el-input>\n' +
        '                  <span class="description" style="margin-left: 10px">超时熔断时间</span>\n' +
        '                </div>\n' +
        '              </div>\n' +
        '              <span class="description">限流策略，配置最大请求次数</span>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '        </el-card>\n' +
        '      </div>\n' +
        '\n' +
        '      <div class="body-content">\n' +
        '        <el-card class="box-card">\n' +
        '          <div slot="header" class="clearfix">\n' +
        '            <span><i class="el-icon-hot-water"/> 服务设计</span>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item">\n' +
        '            <span class="title"><span style="color: red">*</span>请求方式：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <el-select v-model="backend[0]">\n' +
        '                <el-option value="GET">GET</el-option>\n' +
        '                <el-option value="POST">POST</el-option>\n' +
        '              </el-select>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item">\n' +
        '            <span class="title"><span style="color: red">*</span>请求协议：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <el-select v-model="backend[1]">\n' +
        '                <el-option value="HTTP">HTTP</el-option>\n' +
        '                <el-option value="HTTPS">HTTPS</el-option>\n' +
        '              </el-select>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item">\n' +
        '            <span class="title" style="line-height: 17px">负载均衡：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <el-switch v-model="balance"/>\n' +
        '              <span class="description">开启负载均衡模式,可配置多个下游服务并通过权重比实现负载均衡</span>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item">\n' +
        '            <span class="title"><span style="color: red">*</span>后端地址：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <div class="backend-server" v-for="(item,index) in size" :key="item">\n' +
        '                <el-input v-model="balanceConfig[0].backendAddress[index]" placeholder="www.example.com"\n' +
        '                          style="width: 260px"/>\n' +
        '                <span style="line-height: 40px">&nbsp;&nbsp;:&nbsp;&nbsp;</span>\n' +
        '                <el-input v-model="balanceConfig[1].backendPort[index]" style="width: 110px" placeholder="443"/>&nbsp;&nbsp;\n' +
        '                <el-input v-model="balanceConfig[2].backendWeight[index]" style="width: 65px" v-show="balance"\n' +
        '                          placeholder="10"/>&nbsp;&nbsp;\n' +
        '                <el-button type="danger" icon="el-icon-delete" @click="deleteBackend(index)" circle\n' +
        '                           v-show="balance && size !== 1">\n' +
        '                </el-button>\n' +
        '                <el-button type="primary" @click="increaseBackend()" icon="el-icon-plus"\n' +
        '                           v-if="size === index + 1 && size < 4"\n' +
        '                           circle v-show="balance">\n' +
        '                </el-button>\n' +
        '              </div>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item">\n' +
        '            <span class="title"><span style="color: red">*</span>接口路径：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <el-input v-model="backend[2]" class="components" placeholder="Backed api path, example \'/api\'"/>\n' +
        '              <span class="description">路径用于后端服务的标识信息</span>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item">\n' +
        '            <span class="title">查询参数：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <div class="backend-server" v-for="(item,index) in size_p" :key="item">\n' +
        '                <el-input v-model="parameters[index].key" placeholder="Key"\n' +
        '                          style="width: 125px"/>\n' +
        '                <span style="line-height: 40px">&nbsp;&nbsp;:&nbsp;&nbsp;</span>\n' +
        '                <el-input v-model="parameters[index].value" style="width: 245px" placeholder="Value"/>&nbsp;&nbsp;\n' +
        '                <el-button type="danger" icon="el-icon-delete" @click="deleteParam(index)" circle v-if="size_p!==1">\n' +
        '                </el-button>\n' +
        '                <el-button type="primary" @click="increaseParam()" icon="el-icon-plus"\n' +
        '                           v-if="size_p === index + 1" circle>\n' +
        '                </el-button>\n' +
        '              </div>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item" v-if="backend[0]===\'POST\'">\n' +
        '            <span class="title">JSON：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <el-input v-model="backend[3]" class="components" placeholder="JSON" type="textarea" rows="10"/>\n' +
        '              <span class="description">JSON参数</span>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div class="create-item">\n' +
        '            <span class="title" style="line-height: 16px"><span style="color: red">*</span>连接模式：</span>\n' +
        '            <div class="create-sub-item">\n' +
        '              <div style="display: flex;flex-direction: row">\n' +
        '                <el-radio v-model="backend[4]" label="proxy">代理</el-radio>\n' +
        '                <el-radio v-model="backend[4]" disabled label="direct">直连</el-radio>\n' +
        '              </div>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '\n' +
        '          <div style="margin-top: 30px;text-align: right">\n' +
        '            <el-button type="warning" @click="drawer = false">关&nbsp;&nbsp;&nbsp;闭</el-button>\n' +
        '            <el-button @click="submit" type="success">保&nbsp;&nbsp;&nbsp;存</el-button>\n' +
        '          </div>\n' +
        '        </el-card>\n' +
        '      </div>\n' +
        '    </el-drawer>\n' +
        '  </div>',

    data() {
        return {
            idApi: null,
            data: null,
            drawer: false,
            general: [undefined, "", "1.0"],
            interfaces: ['', '', [], '', '', '', []],
            backend: ['', '', '', '', 'proxy'],
            group: [],
            components: [],
            hasLimit: false,
            environ: [{idEnv: '', name: '', available: true}],
            balance: false,
            size: 1,
            size_p: 1,
            fuse: [5000, 50, 5000, false],
            parameters: [{key: '', value: ''}],
            balanceConfig: [{backendAddress: []}, {backendPort: []}, {backendWeight: []}],
            blacklist: [],
            single_phone: '',
            hasPath: false,
        }
    }, methods: {
        submit() {
            if (this.hasPath) {
                this.$message.warning("当前路径不可用")
                return;
            }

            if (this.interfaces[0] === "" || this.general[1] === "" || this.interfaces[1] === ""
                || this.backend[0] === "" || this.general[0] === undefined || this.general[3] === "") {
                this.$message.warning("信息填写不完整")
                return;
            }

            if (this.general[1].length < 2 || this.general[1].length > 10) {
                this.$message.warning("API名称不符合要求")
                return;
            }

            if (this.general[3].length < 5 || this.general[3].length > 100) {
                this.$message.warning("描述信息不符合要求")
                return;
            }

            if (!this.interfaces[0].startsWith("/") || this.interfaces[0].length < 5 || this.interfaces[0].length > 30) {
                this.$message.warning("接口路径不合符要求")
                return;
            }

            let environment = this.interfaces[6];
            let stringEnvironment = JSON.stringify(environment).replaceAll("]", "").replaceAll("\"", "").replaceAll("[", "")
            let fuseTimeout = 20000;
            if (this.fuse[3]) {
                fuseTimeout = this.fuse[2]
            }
            let fuseConfig = {
                circuitBreakerEnabled: this.fuse[3],
                circuitBreakerSleepWindowInMilliseconds: this.fuse[0],
                circuitBreakerErrorThresholdPercentage: this.fuse[1],
                timeout: fuseTimeout
            }
            let blacklist = Array.of(this.blacklist)
            let messageConfig = {
                MaximumNumberOfSendingPerDay: this.single_phone,
                blacklist: blacklist
            }

            if (this.backend[0] === "POST" && this.backend[3].length === 0) {
                this.backend[3] = "{}"
            }


            if (this.backend[2].length === 0 || this.backend[1].length === 0 || this.balanceConfig[1].backendPort.length === 0 ||
                this.balanceConfig[0].backendAddress === 0 || this.backend[1] === 0
                || !this.backend[2].startsWith("/")) {
                this.$message.warning("信息填写不完整")
                return
            }

            let processData = {
                path: this.backend[2],
                port: JSON.stringify(this.balanceConfig[1].backendPort),
                weight: JSON.stringify(this.balanceConfig[2].backendWeight),
                address: JSON.stringify(this.balanceConfig[0].backendAddress),
                method: this.backend[0],
                type: this.backend[1].toLowerCase(),
                queryParam: this.parameters,
                jsonParam: this.backend[3],
                components: this.interfaces[2],
                messageConfig: messageConfig,
            }

            let processJson = JSON.stringify(processData)
            let data = {
                name: this.general[1],
                path: this.interfaces[0],
                type: this.interfaces[1],
                env: stringEnvironment,
                method: this.backend[0],
                group: this.general[0],
                description: this.general[3],
                minute: this.interfaces[3],
                visible: this.general[5],
                version: this.general[2],
                idApi: this.idApi,
                hystrixProperty: JSON.stringify(fuseConfig),
                process: processJson
            }
            if (environment === undefined || environment.length === 0) {
                this.$message.error("没有可用的环境")
                return
            }
            this.$loading()
            axios.post(window.RT_ENV.host_config.host + "/api/addOrDelete", JSON.stringify(data),
                {
                    headers: {
                        'Content-Type': 'application/json',
                        "token": sessionStorage.getItem("current-authorized")
                    }
                }).then(res => {
                if (res.data.code !== 200) {
                    this.$message.error(res.data.message);
                } else {
                    this.clear()
                    this.drawer = false;
                    this.$message.success(res.data.message);
                    this.$emit("refresh", true)
                }
                this.$loading().close()
            }).catch(e => {
                this.$loading().close()
                this.$message.error("网络异常")
                console.debug(e)
            })
        },
        deleteParam(i) {
            if (this.size_p > 1) {
                this.size_p--
                this.parameters.splice(i, 1)
            }
        },
        increaseParam() {
            this.size_p++;
            this.parameters.push({key: '', value: ''})
        },
        deleteBackend(i) {
            if (this.size > 1) {
                this.size--
                this.balanceConfig[0].backendAddress.splice(i, 1)
                this.balanceConfig[1].backendPort.splice(i, 1)
                this.balanceConfig[2].backendWeight.splice(i, 1)
            }
        },
        increaseBackend() {
            if (this.size < 4)
                this.size++
        },
        initCmpt() {
            let token = sessionStorage.getItem("current-authorized");
            axios.get(window.RT_ENV.host_config.host + "/api/getGroup",
                {
                    headers:
                        {"token": token}
                }
            ).then(res => {
                if (res.data.code === 200) {
                    let data = res.data.data;
                    data.forEach(item => {
                        this.group.push({label: item.name, value: item.idGroup})
                    })
                } else {
                    this.$message.error(res.data.message)
                }
            })

            axios.get(window.RT_ENV.host_config.host + "/api/env/list", {
                headers: {"token": token}
            }).then(res => {
                this.environ = res.data.data
            }).catch(e => {
                e.toString()
                this.$message.error("获取多环境节点异常")
            })

            axios.get(window.RT_ENV.host_config.host + "/cmpt/list",
                {
                    headers:
                        {"token": token}
                }).then(res => {
                if (res.data.code === 200) {
                    let data = res.data.data;
                    data.forEach(item => {
                        let disabled = false
                        if (item.enumValue === "LOG_COMPONENT" || item.enumValue === "ROUTING_COMPONENT" || item.enumValue === "SMS_COMPONENT") {
                            disabled = true
                            let current = this.interfaces[2]
                            if (current === undefined || current.length === 0) {
                                let component = [];
                                component.push("LOG_COMPONENT")
                                component.push("ROUTING_COMPONENT")
                                this.interfaces[2] = component;
                            }
                        }
                        this.components.push({
                            value: item.enumValue,
                            label: item.name,
                            disabled: disabled,
                        })
                    })
                } else {
                    this.$message.error("获取依赖组件异常")
                }
            })
        }, checkApi() {
            if (this.interfaces[0].toString().length === 0) {
                return;
            }
            if (!this.interfaces[0].toString().startsWith("/")) {
                this.$message.warning("接口路径必须以'/'开头")
                this.hasPath = true
                return
            }
            axios.get(window.RT_ENV.host_config.host + "/api/checkApiPath?path=" + this.interfaces[0].toString(), {
                headers: {"token": sessionStorage.getItem("current-authorized")}
            }).then(res => {
                this.hasPath = false
                if (res.data.code !== 200) {
                    this.$message.error(res.data.message)
                    this.hasPath = true
                }
            }).catch(e => {
                this.$message.error("校验路径是否可用异常" + e.text)
            })
        }, clear() {
            this.idApi = null
            this.general = [undefined, "", "1.0"]
            this.interfaces = ['', '', [], '', '', '', []]
            this.backend = ['', '', '', '', 'proxy']
            this.group = []
            this.components = []
            this.hasLimit = false
            this.environ = [{idEnv: '', name: '', available: true}]
            this.balance = false
            this.size = 1
            this.size_p = 1
            this.fuse = [5000, 50, 5000, false]
            this.parameters = [{key: '', value: ''}]
            this.balanceConfig = [{backendAddress: []}, {backendPort: []}, {backendWeight: []}]
            this.blacklist = []
            this.single_phone = ''
            this.hasPath = false
        },
        analyze() {
            if (this.data !== null && this.data !== undefined) {
                this.clear()
                let data = this.data
                try {
                    this.general[1] = data.name
                    this.interfaces[6] = data.env.split(",")
                    this.general[3] = data.description
                    this.general[0] = data.group
                    this.interfaces[0] = data.path
                    this.interfaces[1] = data.type
                    this.interfaces[3] = data.minute
                    this.general[5] = data.visible
                    this.general[2] = data.version
                    this.idApi = data.idApi
                    let process = JSON.parse(data.process)
                    this.interfaces[2] = process.components;
                    this.backend[0] = process.method
                    this.backend[2] = process.path
                    this.backend[1] = process.type.toUpperCase()


                    this.balanceConfig[1].backendPort = JSON.parse(process.port)
                    if (this.balanceConfig[1].backendPort.length > 1) {
                        this.balance = true
                        this.size = this.balanceConfig[1].backendPort.length
                    }
                    this.balanceConfig[0].backendAddress = JSON.parse(process.address)
                    console.log(process.weight)
                    this.balanceConfig[2].backendWeight = JSON.parse(process.weight)
                    this.backend[3] = process.jsonParam
                    let fuse = JSON.parse(data.hystrixProperty)
                    this.fuse[3] = fuse.circuitBreakerEnabled
                    this.fuse[0] = fuse.circuitBreakerSleepWindowInMilliseconds
                    this.fuse[1] = fuse.circuitBreakerErrorThresholdPercentage
                    this.fuse[2] = fuse.timeout
                    let param = []
                    process.queryParam.forEach(str => {
                        let jsonObject = JSON.parse(JSON.stringify(str))
                        param.push(jsonObject)
                    })
                    this.parameters = param
                } catch (e) {
                    console.debug(e)
                }
            }
        }
    }, mounted() {
    },
    watch: {
        interfaces(o1) {
            let component = o1[2];
            this.hasLimit = component.toString().indexOf("LIMITING_COMPONENTS") !== -1;

        },
        hasLimit(o1) {
            if (o1) {
                this.interfaces[2].push("AUTHENTICATION_COMPONENT")
            }
        },
    }

});